<template>
  <div class="login">
    <vue-particles color="#fff" :particleOpacity="0.7" :particlesNumber="150" shapeType="circle" :particleSize="4" linesColor="#fff" :linesWidth="1.5" :lineLinked="true" :lineOpacity="0.5" :linesDistance="120" :moveSpeed="3" :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push" class="lizi">
    </vue-particles>
    <div class="loginForm">
      <img class="img2019" src="../../common/images/2019.jpg" alt="">
      <div style="margin: 20px 0;"></div>
      <div class="formDiv" style="">
        <el-form class="form" :model="loginForm" ref="loginForm" status-icon>
          <el-form-item prop="username" :rules="[
      { required: true, message: '姓名不能为空'}]">
            <el-input type="text" placeholder="请输入姓名" v-model="loginForm.username" autofocus resize="vertical" autocomplete="off" prefix-icon="el-icon-al-user"></el-input>
          </el-form-item>
          <el-form-item prop="password" :rules="[
      { required: true, message: '密码不能为空'}]">
            <el-input type="password" placeholder="请输入密码" v-model="loginForm.password" show-password autocomplete="off" prefix-icon="el-icon-al-password1"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
            <el-button @click="resetForm('loginForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("姓名 :" + this.loginForm.username);
          alert("密码 :" + this.loginForm.password);
          this.$router.push('/index')
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style lang="stylus" scoped>
.login
  // display block
  position absolute
  // overflow hidden
  background-image url('../../common/images/xingkong.png')
  background-repeat no-repeat
  background-size 100% 100%
  width 100%
  height 100%
  font-family 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif
  .loginForm
    position absolute
    transform rotateX(0deg)
    border-radius 10px
    z-index 10000
    left 0
    right 0
    margin auto
    top 0
    bottom 0
    padding 30px 40px 10px 35px
    opacity 0.8
    background-color #0d000a
    width 300px
    height 400px
    .img2019
      width 100%
    .formDiv
      opacity 1
      font-family '微软雅黑'
      color #fff
      width 240px
      margin-left 30px
</style>